import React, {Component} from 'react'
class ListComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      options: [
        {
          name: '小明',
          value: 90
        }, {
          name: '小红',
          value: 91
        }, {
          name: '小刚',
          value: 78
        }
      ]
    }

    this.handleChange = this
      .handleChange
      .bind(this);
  }

  handleChange(option, event) {
    console.log('我点击了' + option.name)
  }

  // render() {   return (     <div>       {this         .state         .options
  // .map(function (option) {           return (             <div>     <p>
  // <span>'姓名'+option.name</span>               </p>        </div>        )   })}
  //     </div>   ) } 在列表中有一个重要的属性就是 index
  render() {
    //点击事件的传参方式1
    /**
    return (
      <div>
        {this
          .state
          .options
          .map((option, index) => (
            <div key={index} onClick={(event) => this.handleChange(option, event)}>
              <p>
                <span>{'姓名' + option.name}</span>
              </p>
              <p>
                <span>{'考试分数' + option.value}</span>
              </p>
            </div>
          ))}
      </div>
    )
    */
    //点击事件的传参方式2 推荐第二种
    return (
      <div>
        {this
          .state
          .options
          .map((option, index) => (
            <div
              key={index}
              onClick={this
              .handleChange
              .bind(this, option)}>
              <p>
                <span>{'姓名' + option.name}</span>
              </p>
              <p>
                <span>{'考试分数' + option.value}</span>
              </p>
            </div>
          ))}
      </div>
    )
  }
}

export default ListComponent